<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="renderer" content="webkit">
        <title></title>
        <link rel="stylesheet" href="css/pintuer.css">
        <link rel="stylesheet" href="css/admin.css">
        <script src="js/jquery.js"></script>
        <script src="js/pintuer.js"></script>
        <script src="/js/vuejs-2.5.16.js"></script>
        <script src="/js/axios-0.18.0.js"></script>
    </head>
    <body>
        <div class="panel admin-panel" id="bannerDiv">
            <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>查看灵魂选项</strong></div>
            <div class="body-content">
                <form class="form-x">
                    <input type="hidden" name="id">

                    <div class="form-group">
                        <div class="label">
                            <label>灵魂题目：</label>
                        </div>
                        <div class="field">
                            <input type="text" class="input w50" v-model="titleName" name="title" disabled="disabled"/>
                            <div class="tips"></div>
                        </div>
                    </div>
                    <div class="clear"></div>

                    <div class="field" v-for="(option,index) in optinsList">
                        <div class="form-group">
                            <div class="label" >
                                <label v-if="index==0">灵魂选项A：</label>
                                <label v-if="index==1">灵魂选项B：</label>
                                <label v-if="index==2">灵魂选项C：</label>
                                <label v-if="index==3">灵魂选项D：</label>
                                <label v-if="index==4">灵魂选项E：</label>
                                <label v-if="index==5">灵魂选项F：</label>
                                <label v-if="index==6">灵魂选项G：</label>
                                <label v-if="index==7">灵魂选项H：</label>
                                <label v-if="index==8">灵魂选项I：</label>
                            </div>

                            <input type="text" class="input w50" name="url" :value="option.options"
                                   disabled="disabled"/>
                            <div class="tips"></div>
                        </div>
                    </div>
                    <div class="clear"></div>


                    <!--<div class="form-group">
                      <div class="label">
                        <label>图片：</label>
                      </div>
                      <div class="field">
                        <input type="file"   name="img" class="input tips" style="width:25%; float:left;"  @change="uploadFile()"  data-toggle="hover" data-place="right"/>
                        <div class="tipss">图片尺寸：1300*500</div>
                      </div>
                    </div>
                    <div class="clear"></div>


                    <div class="form-group" v-if="banner.picPath">
                      <div class="label">
                        <label>原图片：</label>
                      </div>
                      <div class="field">
                        <img v-bind:src="banner.picPath" alt="" width="300" height="100" />
                      </div>
                    </div>
                    <div class="clear"></div>



                    <div class="form-group">
                      <div class="label">
                        <label>描述：</label>
                      </div>
                      <div class="field">
                        <textarea name="contentDesc"  class="input" style="height:150px; border:1px solid #ddd;" v-model="banner.contentDesc"></textarea>
                        <div class="tips"></div>
                      </div>
                    </div>

                    <div class="clear"></div>


                    <div class="form-group">
                      <div class="label">
                        <label>排序：</label>
                      </div>
                      <div class="field">
                        <input type="number" class="input w50" name="orderNo"    v-model="banner.orderNo" data-validate="number:排序必须为数字" />
                        <div class="tips"></div>

                      </div>
                    </div>-->

                    <div class="form-group">
                        <div class="label">
                            <label></label>
                        </div>
                        <div class="field">
                            <a class="button bg-main icon-check-square-o" type="submit" @click="save()"> 返回</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script type="text/javascript">
            const app = new Vue({
                el: '#bannerDiv',
                data: {
                    titleName: "",
                    optinsList: [],

                },
                methods: {
                    //图片上传
                    uploadFile() {
                        let formData = new window.FormData();
                        formData.append('uploadFile', document.querySelector('input[type=file]').files[0]);
                        let options = {  // 设置axios的参数
                            url: "/file/upload",//访问地址
                            data: formData,
                            method: 'post',
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        };
                        axios(options).then(resp => {
                            if (resp.data != "") {
                                this.banner.picPath = resp.data;//将图片访问地址记录到movies对象
                            }
                        })
                    },
                    save() {
                        location.href = "/title_list.html"
                    },
                    findById(id) {
                        axios.get("/soul/optins?id=" + id).then(resp => {
                            this.titleName = resp.data.titleName;
                            this.optinsList = resp.data.optionsText
                        })
                    }
                },
                created() {
                    let string = location.search.split("=")[1];
                    this.findById(string);
                }
            })
        </script>
        <script src="./js/verify.js"></script>
    </body>
</html>